<template>
  <div class="index">
    <div class="title-bar">
      前端面试题
    </div>
    <form action="/">
      <van-search
        v-model="searchV"
        shape="round"
        background="#333"
        placeholder="请输入标题关键词进行搜索"
        @search="onSearch"
        @update:model-value="onUpdate"
        @focus="visible=true"
      />
      <transition name="van-slide-down">
        <div class="nav-list" v-show="visible">Slide Down</div>
      </transition>
    </form>
    <!-- 列表组件 -->
    <list-vue :list="searchList" />
  </div>
</template>

<script>
import { ref } from "vue"
import ListVue from "./List.vue"

export default {
  name: 'Index',
  components: {
    ListVue,
  },
  setup() {
    const list = [
      {
        title: '1. js类型', answer: `
基本类型：Number、Boolean、String、null、undefined、symbol（ES6 新增的）;
引用类型：Object`, isHtml: true
      },
      {
        title: '2. var变量提升', answer: `
var a = 1 
function foo () {
  // a：undefined
  if (!a) {
    var a = 2
  }
  console.log(a) // 2
}
foo()`, isHtml: true
      },
      { title: '3. 输入url按回车键后流程', answer: '1.DNS域名解析； 2.建立TCP连接； 3.发送HTTP请求； 4.服务器处理请求； 5.返回响应结果； 6.关闭TCP连接； 7.浏览器解析HTML； 8.浏览器布局渲染；' },
      { title: '4. 0.1 + 0.2 === 0.3 嘛？为什么？', answer: 'JavaScript是"弱类型"语言，在小数点运算时，JavaScript采取IEEE754二进制浮点运算，就可能出现精度丢失的问题' },
      { title: '5. 什么是原型链？', answer: '当对象查找一个属性的时候，如果没有在自身找到，那么就会查找自身的原型，如果原型还没有找到，那么会继续查找原型的原型，直到找到 Object.prototype 的原型时，此时原型为 null，查找停止。这种通过原型链接的逐级向上的查找链被称为原型链' },
      {
        title: '6. vue生命周期', answer: `
beforeCreate(创建前) vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化
created(创建后) 完成了 data数据初始化, el还未初始化
beforeMount(载入前) vue实例的$el和data都初始化了, 相关的render函数首次被调用
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeUnmount(卸载前)
unmounted(卸载后)`, isHtml: true
      },
      {
        title: '7. 说说你对 SPA 单页面的理解，它的优缺点分别是什么？', answer: `
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
前后端职责分离，架构清晰；
缺点：
初次加载耗时多；SEO难度较大`, isHtml: true
      },
      {
        title: '8. 深拷贝', answer: require('../assets/deepClone.png'), isImg: true
      },
    ]
    const searchV = ref('')
    const visible = ref(false)
    let searchList = ref(list)
    const onSearch = (v) => {
      searchList.value = []
      list.map(item => {
        if (item.title.indexOf(v) > -1) {
          searchList.value.push(item)
        }
      })
    }
    const onUpdate = (v) => {
      if (!v) {
        searchList.value = list
      }
    }
    return {
      list,
      searchV,
      onSearch,
      onUpdate,
      searchList,
      visible,
    }
  },
  methods: {
    copy(v) {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(v)
        this.$notify({ type: 'success', message: '复制成功！' })
      } else {
        this.$notify({ type: 'warning', message: '不支持复制！' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  min-height: 100vh;
  background-color: #333;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);

  form {
    position: relative;
  }

  .nav-list {
    background: #fff;
    position: absolute;
    top: 40px;
  }

  .title {
    &-bar {
      line-height: 30px;
      font-size: 16px;
      background-color: #eee;
      text-align: center;
      color: #000;

      span {
        font-size: 24px;
        vertical-align: middle;

        &:before {
          content: "\25cf";
        }
      }

      .close {
        color: red;
      }

      .min {
        color: yellow;
      }

      .max {
        color: #00ff00;
      }
    }
  }

  .content {
    color: #eee;
    padding: 10px;
    font-family: Consolas, serif;

    .item {
      margin-bottom: 12px;

      .answer-box {
        background: #795548;
        border-radius: 5px;
        padding: 10px 15px;
        box-shadow: 0 20px 68px rgba(0, 0, 0, 0.55);
        line-height: 1.4;

        .icon {
          margin-bottom: 15px;
        }
      }

      p {
        &:first-child {
          color: #ff9800;
          margin-bottom: 12px;
        }
        &:last-child {
          padding-left: 5px;
        }

        img {
          width: 100%;
        }
      }

      pre {
        margin: -20px 0 0 10px;
        white-space: pre-wrap;
        word-wrap: break-word;
      }
    }
  }

  .hide {
    position: absolute;
    z-index: -1;
    bottom: 0;
    visibility: hidden;
  }
}
</style>
